<template>
  <el-card class="content">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="优惠券管理" name="first">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="券标题">
            <el-input v-model="formInline.coupon" placeholder="优惠卷标题" />
          </el-form-item>
          <el-form-item>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
        <el-row>
          <el-button :icon="EditPen" type="primary" @click="onAdd">添加优惠卷</el-button>
        </el-row>
        <!-- 添加弹窗 -->
        <el-dialog v-model="outerVisible">
          <div class="dialogTitle">基本信息</div>
          <el-divider />

          <el-form :model="addCoupon" label-width="120px" :rules="rules">
            <el-form-item label="优惠券标题" prop="title">
              <el-input v-model="addCoupon.title" placeholder="请输入优惠卷标题" />
            </el-form-item>
            <el-form-item label="优惠券类型" prop="type">
              <el-radio-group v-model="addCoupon.type">
                <el-radio label="代金卷" />
                <el-radio label="折扣卷" />
                <el-radio label="课时卷" />
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <div class="countMoneyInput">
                抵扣 <el-input v-model="addCoupon.countMoney" placeholder="抵扣金额" />元
              </div>
            </el-form-item>
            <el-form-item label="有效期" prop="effective">
              <el-radio-group v-model="addCoupon.effective">
                <el-radio label="永久有效" />
                <el-radio label="固定期限" />
                <el-radio label="领取后限制" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="使用门槛" prop="threshold">
              <el-radio-group v-model="addCoupon.threshold">
                <el-radio label="无门槛" />
                <el-radio label="最低消费" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="发行数量" prop="num">
              <el-input v-model="addCoupon.num" placeholder="请输入数量" />
            </el-form-item>
            <el-form-item label="使用说明">
              <el-input v-model="addCoupon.desc" type="textarea" />
            </el-form-item>
          </el-form>

          <template #footer>
            <div class="dialog-footer">
              <el-button @click="outerVisible = false">取消</el-button>
              <el-button type="primary" @click="onFormSubmit"> 确定 </el-button>
            </div>
          </template>
        </el-dialog>
        <Conpon :couponsInfo="couponsProps" @changeCoupons="changeCoupon" />
      </el-tab-pane>
      <el-tab-pane label="领取记录" name="second">领取记录</el-tab-pane>
      <el-tab-pane label="核销记录" name="third">核销记录</el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup>
import { ref } from "vue";
import Conpon from "../../../components/content/marketingMgr/couponsMgr/coupon.vue";
import { ElMessage } from "element-plus";
//tabs
const activeName = ref("first");
const handleClick = (tab, event) => {
  console.log(tab, event);
};
//表单规则
const rules = ref({
  title: [
    {
      required: true,
      message: "请输入优惠卷标题",
      trigger: "blur",
    },
  ],
  type: [
    {
      required: true,
      message: "请选择优惠卷类型",
      trigger: "blur",
    },
  ],
  effective: [
    {
      required: true,
      message: "请选择优惠卷有效期",
      trigger: "blur",
    },
  ],
  threshold: [
    {
      required: true,
      message: "请选择优惠卷使用门槛",
      trigger: "blur",
    },
  ],
  num: [
    {
      required: true,
      message: "请输入优惠卷数量",
      trigger: "blur",
    },
  ],
});
//传输优惠卷数据
const couponsProps = ref([]);
//优惠卷数据
const coupons = ref([
  {
    title: "折扣",
    type: "代金券",
    countMoney: "100",
    effective: "不限制",
    threshold: "无使用门槛",
    num: "1000",
    desc: "无",
  },
]);
couponsProps.value = coupons.value;
//添加优惠卷数据
const addCoupon = ref({
  title: "",
  type: "",
  countMoney: "",
  effective: "",
  threshold: "",
  num: "",
  desc: "",
});
//删除子传父

const changeCoupon = (val) => {
  console.log(val);
};

//查找
const formInline = ref({});
const onSearch = () => {
  const obj = coupons.value.find((item) => {
    return item.title == formInline.value.coupon;
  });
  if (!obj) {
    ElMessage.error("卷标题不存在");
    return;
  } else {
    const arr = [];
    arr.push(obj);
    couponsProps.value = arr;
  }
};

//重置
const onReset = () => {
  couponsProps.value = coupons.value;
};

//添加弹窗
const outerVisible = ref(false);
const onAdd = () => {
  outerVisible.value = true;
};
//表单提交
const onFormSubmit = () => {
  coupons.value.push(addCoupon.value);
  addCoupon.value = {
    title: "",
    type: "",
    countMoney: "",
    effective: "",
    threshold: "",
    num: "",
    desc: "",
  };
  outerVisible.value = false;
};
</script>

<style lang="scss" scoped>
.countMoneyInput {
  //   display: flex;
  width: 400px;
}
.countMoneyInput .el-input {
  width: 100px;
}
.dialogTitle {
  margin-bottom: 30px;
}

.etms-table-container {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
}
.el-form-item {
  margin-right: 15px;
}
.content {
  margin: 10px 15px;
}
</style>
